<template>
  <navbar/>
  <div class="container main" v-loading="loading">
    <div class="grid1">
      <div class="grid11">
        <div class="grid112" style="margin:13px 20px 0 0;">
          <div style="margin-top: 25px;">
            <el-icon style="color: #A9ABB1;"><Histogram /></el-icon>
            <span>标签</span>
          </div>
          <div>
            <tagInput @getTag="getTag" ref="tagValue"/>
          </div>
        </div>
        <div class="grid111" style="margin: 10px 0 10px 0;">
          <div style="margin-top: 25px;">
            <el-icon style="color: #A9ABB1;"><Comment /></el-icon>
            <span>标题</span>
          </div>
          <el-input
            v-model="title"
            size="large"
            placeholder="Title - 必填"
          />
        </div>
      </div>
      <div class="grid12" style="margin: 10px 0 10px 0;">
        <uploadPic @getValue="getSonValue"/>
      </div>
    </div>
    <div class="grid21">
      <div style="margin-top: 10px;">
        <el-icon style="color: #A9ABB1;"><Promotion /></el-icon>
        <span>内容</span>
      </div>
      <!-- 富文本编辑器 -->
      <div class="grid2" style="height: auto;min-height: 360px;border: 1px solid #ccc;border-radius: 10px;">
        <div>
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
        </div>
      </div>
    </div>
    <div class="grid3">
      <div></div>
      <div>
      <el-button style="margin-top:12px;border-radius: 8px;" size="large" round type="success" @click="publishPosts()">
        <el-icon><Select /></el-icon>
        &nbsp;&nbsp;
        <p>确认发表</p>
      </el-button>
      <el-button style="margin-top:12px;border-radius: 8px;" size="large" type="danger" @click="clearAll()">
        <el-icon><Close /></el-icon>
        &nbsp;&nbsp;
        <p>清空内容</p>
      </el-button>
    </div>
    </div>
  </div>
  <!-- 返回顶部组件 -->
  <el-backtop :right="50" :bottom="50" />
</template>
<script setup>
import navbar from '@/components/navbar.vue'
import uploadPic from '@/components/uploadPic.vue'
import tagInput from '@/components/tag.vue'
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { uploadPost } from '@/api/system.js'
import { ElNotification } from 'element-plus'
// 引入wangeditor样式
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
const mode = 'simple'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('')
const toolbarConfig = {}
const editorConfig = { MENU_CONF: {} , placeholder: '请输入文章内容...' }
editorConfig.MENU_CONF['uploadImage'] = {
    // 其他配置...
    // 小于该值就插入 base64 格式（而不上传），默认为 0
    base64LimitSize: 10240 * 10240 //单位 kb
}
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
const sonMessage = ref()
const mainValue = ref()
const tagValue = ref()
const userId = ref()
const getTag = (value) => {
  mainValue.value = value
  console.log(value);
}
const getSonValue = (value) => {
  sonMessage.value = value
  console.log(value);
}
const title = ref('')
// 加载组件
const loading = ref(false)
const publishPosts = () => {
  console.log(valueHtml.value)
  let data = {
    user_id: userId.value, // 后续改动态
    title: title.value,
    tag: '',
    img: '',
    report: valueHtml.value
  }
  // 处理子组件传过来的缩略图
  if(sonMessage.value){
    console.log(sonMessage.value);
    data.img = sonMessage.value
  }
  if(mainValue.value){
    console.log(mainValue.value);
    data.tag = mainValue.value
  }
  // 标题和内容非空时触发上传数据库接口
  if(data.title && data.report){
    loading.value = true
    uploadPost(data).then((res) =>{
      console.log(res)
      if(res.id){
        loading.value = false
        ElNotification({
          title: '发表成功',
          message: '已同步到首页',
          type: 'success',
        })
        valueHtml.value = ''
        title.value = ''
        tagValue.value.tagValues = ''
      }else{
      loading.value = false
      ElNotification({
        title: '发表失败',
        message: '请填写 标题 和 内容',
        type: 'error',
      })
      }
    })
  }else{
    ElNotification({
      title: '发表失败',
      message: '请填写 标题 和 内容',
      type: 'error',
    })
  }
}
const clearAll = () => {
  valueHtml.value = ''
  title.value = ''
  tagValue.value.tagValues = ''
  ElNotification({
    title: '清除成功',
    message: '已清空内容',
    type: 'success',
  })
}
onMounted(() => {
  userId.value = localStorage.getItem("userId")
})
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
</script>
<style lang="scss" scoped>
.grid1{
  display: grid;
  grid-template-columns: 3fr 1fr;
  height: 197px;
}
.grid11{
  display: grid;
  grid-template-rows: 1fr 1fr;
}
#editor—wrapper {
  border: 1px solid #ccc;
  z-index: 100; /* 按需定义 */
}
#toolbar-container { border-bottom: 1px solid #ccc; }
#editor-container { height: 500px; }
p {
  margin-top: .4em;
  margin-bottom: .4rem;
}
:deep(.grid111 .el-input__inner){
  height: 75px;
}
:deep(.grid111 .el-input--large .el-input__wrapper){
  border-radius: 10px !important;
  font-size: 19px;
  margin-right: 20px;
}
:deep(.el-input--large .el-input__wrapper){
  ::-webkit-input-placeholder{/*Webkit browsers*/
    font-size:17px;
  }
  :-moz-placeholder{/*Mozilla Firefox 4 to 8*/
    font-size:17px;
  }
  ::moz-placeholder{/*Mozilla Firefox 19+*/
    font-size:17px;
  }
}
.main{
  margin-top: 63px;
  margin-bottom: 0px;
  width: 100%;
  display: grid;
  grid-template-rows: 3fr auto 1fr;
}
:deep(.w-e-toolbar){
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
:deep(.w-e-text-container){
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.grid112,.grid111{
  display: grid;
  grid-template-columns: 1fr 10fr;
  span{
    margin-left: 10px;
    font-size: 18px;
    color: #A9ABB1;
  }
}
.grid21{
  display: grid;
  grid-template-columns: 1fr 13fr;
  margin-top: 5px;
  span{
    margin-left: 10px;
    font-size: 18px;
    color: #A9ABB1;
  }
}
.grid3{
  display: grid;
  grid-template-columns: 1fr 13fr;
}
:deep(.el-select .el-input__inner){
  height: 75px !important;
}
:deep(.el-select .el-input__wrapper){
  border-radius: 10px;
}
:deep(.el-select .el-select__tags .el-tag--info){
  padding: 28px 15px 28px 15px;
  font-size: 16px;
  border-radius: 8px;
}
:deep(.el-tag__close){
  height: 30px;
  width: 30px;
  font-size: 20px;
}
:deep(#w-e-textarea-1){
  min-height: 380px;
}
</style>